<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>7.v-for</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <style>
        h1{
            color: red;
        }

        [v-cloak]{
            display: none;
        }
        
    </style>
    <body>

    
        <!-- 准备好一个容器-->
        <div id="app" v-cloak>
            <!-- <div v-pre> -->
            <!-- <h1>v-for 循环遍历 array   --- item </h1>
            <p v-for="item in arr" :key="item">{{item}}</p>

            <h1>v-for 循环遍历 array   --- item  --  index </h1>
            <p v-for="(item,index) in arr" :key="index">{{index+1}}.{{item}}</p>


            <h1>v-for 循环遍历 object   --- item  </h1>
            <p v-for="item in obj">{{item}}</p>


            <h1>v-for 循环遍历 object   --- item ---key </h1>
            <p v-for="(item,key) in obj">{{key}}----{{item}}</p>

            <h1>v-for 循环遍历 object   --- item ---key --- index</h1>
            <p v-for="(item,key,index) in obj">{{index}}---{{key}}---{{item}}</p> -->
        <!-- </div> -->
        
            <!-- <h1>v-for 循环遍历 number  </h1>
            <p v-for="(item,index) in num">{{index}}----{{item}}</p>
        
            <h1>v-for 循环遍历 string  </h1>
            <p v-for="(item,index) in str">{{index}} ---- {{item}}</p> -->

            <h1>v-for  循环 undefined</h1>
            <p v-for="item in un">{{item}}</p>
        
        </div>
    </body>

    <script>
        new Vue({
            el:"#app",
            data:{
                arr:["vue","angular","react","小程序wechat","node","express"],
                obj:{
                    uname:"张三",
                    age:18,
                    sex:"男"
                },
                num:10,
                str:"学习vue指令",
                un:null
            }
        })
    </script>
</html>